    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>儿童故事绘本创作平台</title>
        <!-- 引入Tailwind CSS -->
        <script src="https://cdn.tailwindcss.com"></script>
        <!-- 引入Font Awesome图标库 -->
        <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- 自定义Tailwind配置 -->
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            primary: '#4F46E5', // 主色调：靛蓝色
                            secondary: '#EC4899', // 辅助色：粉色
                            accent: '#F59E0B', // 强调色：琥珀色
                            neutral: '#1F2937', // 中性色：深灰色
                        },
                        fontFamily: {
                            sans: ['Inter', 'system-ui', 'sans-serif'],
                            display: ['"Comic Sans MS"', '"Marker Felt"', 'cursive'],
                            song: ['SimSun', '宋体', 'serif'],
                        },
                        animation: {
                            'bounce-slow': 'bounce 3s infinite',
                        }
                    },
                }
            }
        </script>
        <!-- 自定义工具类 -->
        <style type="text/tailwindcss">
            @layer utilities {
                .content-auto {
                    content-visibility: auto;
                }
                .text-shadow {
                    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                .text-shadow-lg {
                    text-shadow: 0 4px 8px rgba(0,0,0,0.25);
                }
                .bg-gradient-fun {
                    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                }
            }
        </style>
        <!-- 自定义样式 -->
        <style>
            body {
                background-color: #F9FAFB;
            }
            .prompt-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 20px rgba(0,0,0,0.1);
            }
            .form-input:focus {
                border-color: #4F46E5;
                box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
            .float-animation {
                animation: float 3s ease-in-out infinite;
            }
            
            /* 自定义段落缩进样式 */
            .text-indent-4 {
                text-indent: 2em;
            }
        </style>
    </head>
    <body class="min-h-screen font-sans text-neutral">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="navbar">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center justify-center space-x-3 mx-auto">
                    <i class="fa fa-book text-primary text-4xl"></i>
                    <h1 class="text-3xl font-bold text-primary font-display">童话王国</h1>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="pt-20 pb-16">
            <!-- 英雄区域 -->
            <section id="home" class="py-16 bg-gradient-fun text-white">
                <div class="container mx-auto px-4">
                    <div class="flex flex-col md:flex-row items-center justify-between gap-8">
                        <div class="md:w-1/2 space-y-6">
                            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow-lg">
                                创造属于孩子的<br><span class="text-accent">神奇故事世界</span>
                            </h1>
                            <p class="text-lg text-white/90 max-w-lg">
                                通过人工智能技术，轻松创作精彩的儿童故事和插画提示词，为孩子打造独一无二的绘本体验。
                            </p>
                            <div class="flex flex-wrap gap-4">
                                <a href="#generator" class="px-6 py-3 bg-white text-primary font-medium rounded-full shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
                                    <i class="fa fa-magic mr-2"></i>开始创作
                                </a>
                                <a href="#about" class="px-6 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white/10 transition-all">
                                    <i class="fa fa-info-circle mr-2"></i>了解更多
                                </a>
                            </div>
                        </div>
                        <div class="md:w-1/2 relative">
                            <div class="absolute inset-0 bg-primary/20 rounded-full blur-3xl"></div>
                            <img src="https://picsum.photos/id/1040/600/400" alt="儿童阅读绘本" class="relative z-10 w-full h-auto rounded-2xl shadow-2xl float-animation">
                        </div>
                    </div>
                </div>
            </section>

            <!-- 故事生成器区域 -->
            <section id="generator" class="py-16 bg-white">
                <div class="container mx-auto px-4">
                    <div class="text-center mb-12">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">故事绘本生成器</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">输入简单的故事参数，让AI为您创作出精彩的儿童故事和插画提示词</p>
                    </div>

                    <div class="max-w-3xl mx-auto bg-gray-50 rounded-2xl shadow-md p-6 md:p-8">
                        <form id="story-form" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="theme" class="block text-sm font-medium text-gray-700 mb-1">故事主题 *</label>
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                            <i class="fa fa-lightbulb-o"></i>
                                        </span>
                                        <input type="text" id="theme" name="theme" class="form-input w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder="例如：友谊、勇敢、环保等" required>
                                    </div>
                                </div>
                                <div>
                                    <label for="main_character" class="block text-sm font-medium text-gray-700 mb-1">主角 *</label>
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                            <i class="fa fa-user-circle-o"></i>
                                        </span>
                                        <input type="text" id="main_character" name="main_character" class="form-input w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder="例如：小兔子、小熊、小猫咪等" required>
                                    </div>
                                </div>
                                <div>
                                    <label for="setting" class="block text-sm font-medium text-gray-700 mb-1">故事背景 *</label>
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                            <i class="fa fa-map-marker"></i>
                                        </span>
                                        <input type="text" id="setting" name="setting" class="form-input w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder="例如：森林、海洋、太空等" required>
                                    </div>
                                </div>
                                <div>
                                    <label for="moral" class="block text-sm font-medium text-gray-700 mb-1">故事寓意</label>
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                            <i class="fa fa-heart"></i>
                                        </span>
                                        <input type="text" id="moral" name="moral" class="form-input w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder="可选">
                                    </div>
                                </div>
                            </div>

                            <div class="pt-4">
                                <button type="submit" id="generate-btn" class="w-full py-3 bg-primary text-white font-medium rounded-lg shadow-md hover:bg-primary/90 transition-all flex items-center justify-center gap-2">
                                    <i class="fa fa-magic"></i>
                                    <span>生成故事绘本</span>
                                </button>
                                <p class="text-xs text-gray-500 mt-2 text-center">* 为必填项</p>
                            </div>
                        </form>
                    </div>
                </div>
            </section>

            <!-- 结果显示区域 -->
            <section id="results" class="py-16 bg-gray-50 hidden">
                <div class="container mx-auto px-4">
                    <div class="text-center mb-12">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">创作结果</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">点击下方插画提示词可以查看详细内容</p>
                    </div>

                    <!-- 加载状态 -->
                    <div id="loading-state" class="hidden flex flex-col items-center justify-center py-12">
                        <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
                        <p class="text-gray-600">正在创作您的故事绘本...</p>
                    </div>

                    <!-- 错误状态 -->
                    <div id="error-state" class="hidden py-12 text-center">
                        <i class="fa fa-exclamation-circle text-4xl text-red-500 mb-4"></i>
                        <p class="text-gray-600" id="error-message">生成故事绘本时发生错误，请重试</p>
                    </div>

                    <!-- 故事内容 -->
                    <div id="story-result" class="max-w-3xl mx-auto bg-white rounded-2xl shadow-md p-6 md:p-8 mb-10">
                        <h3 class="text-xl font-bold text-primary mb-4 flex items-center gap-2">
                            <i class="fa fa-book"></i>
                            故事内容
                        </h3>
                        <div id="story-content" class="prose prose-lg max-w-none text-gray-700 whitespace-pre-line">
                            <!-- 故事内容将在这里显示 -->
                        </div>
                        <div class="mt-6">
                            <button id="copy-story-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center gap-2">
                                <i class="fa fa-copy"></i>
                                <span>复制故事</span>
                            </button>
                        </div>
                    </div>

                    <!-- 插画提示词 -->
                    <div id="image-prompts-result" class="max-w-5xl mx-auto">
                        <h3 class="text-xl font-bold text-primary mb-6 flex items-center gap-2">
                            <i class="fa fa-paint-brush"></i>
                            插画提示词
                        </h3>
                        <div id="image-prompts-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <!-- 插画提示词卡片将在这里动态生成 -->
                        </div>
                    </div>

                    <!-- 插画生成和显示区域 -->
                    <div id="images-result" class="max-w-5xl mx-auto mt-16">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-bold text-primary flex items-center gap-2">
                                <i class="fa fa-image"></i>
                                插画生成
                            </h3>
                            <button id="generate-images-btn" class="px-5 py-2 bg-secondary text-white font-medium rounded-lg shadow-md hover:bg-secondary/90 transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                                <i class="fa fa-magic"></i>
                                <span>生成插画</span>
                            </button>
                        </div>
                        
                        <!-- 加载状态 -->
                        <div id="images-loading-state" class="hidden flex flex-col items-center justify-center py-12">
                            <div class="w-16 h-16 border-4 border-secondary border-t-transparent rounded-full animate-spin mb-4"></div>
                            <p class="text-gray-600">正在生成插画，请稍候...</p>
                        </div>

                        <!-- 错误状态 -->
                        <div id="images-error-state" class="hidden py-12 text-center">
                            <i class="fa fa-exclamation-circle text-4xl text-red-500 mb-4"></i>
                            <p class="text-gray-600" id="images-error-message">生成插画时发生错误，请重试</p>
                        </div>

                        <!-- 关键词显示 -->
                        <div id="keyword-display" class="text-center mb-8 hidden">
                            <p class="text-lg font-medium text-gray-700">
                                <span class="text-primary font-bold">关键词：</span>
                                <span id="keyword-text"></span>
                            </p>
                        </div>

                        <!-- 图片显示区域 -->
                        <div id="images-grid" class="flex justify-center items-center py-8 px-4">
                            <!-- 生成的插画将在这里动态显示 -->
                            <!-- 图片容器样式会在script.js中动态添加 -->
                        </div>
                    </div>

                    <!-- 故事绘本整合显示区域 -->
                    <div id="storybook-integration" class="max-w-5xl mx-auto mt-16">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-bold text-primary flex items-center gap-2">
                                <i class="fa fa-book"></i>
                                故事绘本整合视图
                            </h3>
                            <button id="generate-storybook-btn" class="px-5 py-2 bg-accent text-white font-medium rounded-lg shadow-md hover:bg-accent/90 transition-all flex items-center gap-2">
                                <i class="fa fa-object-group"></i>
                                <span>生成整合视图</span>
                            </button>
                        </div>

                        <!-- 整合视图容器 -->
                        <div id="storybook-container" class="bg-white rounded-2xl shadow-lg p-6 md:p-8 hidden">
                            <!-- 故事标题 -->
                            <div class="text-center mb-8">
                                <h2 class="text-2xl md:text-3xl font-bold text-primary mb-2 font-song" id="integrated-story-title">童话故事</h2>
                                <div class="w-24 h-1 bg-primary mx-auto"></div>
                            </div>

                            <!-- 整合内容区域 -->
                            <div id="integrated-content" class="space-y-12">
                                <!-- 故事内容将在这里显示 -->
                            </div>
                        </div>

                        <!-- 提示信息 -->
                        <div id="storybook-info" class="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
                            <i class="fa fa-info-circle text-blue-500 text-2xl mb-3"></i>
                            <p class="text-blue-700">请先生成故事和插画，然后点击"生成整合视图"按钮，即可将故事内容和插画整合为一个完整的故事绘本。</p>
                        </div>
                    </div>
                </div>
            </section>

        </main>

        <!-- 页脚 -->
        <footer class="bg-neutral text-white py-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="flex items-center space-x-2 mb-4 md:mb-0">
                        <i class="fa fa-book text-primary text-xl"></i>
                        <span class="text-lg font-bold font-display">童话王国</span>
                    </div>
                </div>
            </div>
        </footer>

        <!-- 提示词详情模态框 -->
        <div id="prompt-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[80vh] overflow-y-auto">
                <div class="p-6 border-b">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-bold text-primary">插画提示词详情</h3>
                        <button id="close-modal-btn" class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fa fa-times text-xl"></i>
                        </button>
                    </div>
                </div>
                <div class="p-6">
                    <div id="prompt-number" class="text-sm text-gray-500 mb-2"></div>
                    <div id="prompt-content" class="text-gray-700 whitespace-pre-line"></div>
                </div>
                <div class="p-6 border-t flex justify-end">
                    <button id="copy-prompt-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
                        <i class="fa fa-copy"></i>
                        <span>复制提示词</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- JavaScript -->
        <script src="script.js"></script>
    </body>
    </html>